<script setup lang="ts">
import { getCustomPhone, setCustomPhone } from '../../api/redis'
import { HttpStatusCode } from "axios";
import { ElMessage } from "element-plus";

type CustomerData = {
  customer_phone: string
  customer_wx: string
}

let customer_phone = ref<string>('')
let customer_wx = ref<string>('')

const initData = async () => {
  const res = await getCustomPhone()
  if(res.statusCode === HttpStatusCode.Ok) {
    if(res.data === null) return
    let customer_data: CustomerData = JSON.parse(res.data as string)
    customer_phone.value = customer_data.customer_phone
    customer_wx.value = customer_data.customer_wx
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}

const setObj = async () => {
  let data: CustomerData = {
    customer_phone: customer_phone.value,
    customer_wx: customer_wx.value
  }
  const res = await setCustomPhone(JSON.stringify(data))
  if(res.statusCode === HttpStatusCode.Created) {
    ElMessage({
      message: '设置成功',
      type: 'success',
    })
  } else {
    ElMessage({
      message: '设置失败，请重试',
      type: 'error',
    })
  }
}

onMounted(() => {
  initData()
})
</script>

<template>
<div class="container">
  <span class="title">客服手机号码设置</span>
  <el-input class="inp" v-model="customer_phone" placeholder="输入客服手机号码" />
  <span class="title">客服微信号设置</span>
  <el-input class="inp" v-model="customer_wx" placeholder="输入客服微信号" />
  <el-button type="primary" class="btn" @click="setObj">确认</el-button>
</div>
</template>

<style scoped lang="less">
.container {
  width: 500px;
  height: 300px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .inp {
    margin-bottom: 10px;
  }
  .btn {
    margin-top: 10px;
    width: 60px;
    height: 30px;
  }
}
</style>